<template>
  <view class="content">
    路由测试页面
    <image class="logo" src="/static/logo.png"></image>
    {{username}}:{{age}}
    <u-button type="success">
      <text>{{title}} 框架真好</text>
      <u-icon name="thumb-up-fill" color="#ffffff" size="28"></u-icon>
    </u-button>
    <u-button type="success" @click="decoratorTest">装饰器测试66666</u-button>
    <u-button type="success" @click="goIndexPage">回到首页</u-button>
  </view>
</template>

<script>
  import {
    testGet,
    testPost
  } from '@/api/request/test.js'
  import {
    mapState
  } from 'vuex'
  import debounceDecorator from "@/decorator/debounceDecorator"; //引入mapState
  export default {
    computed: {
      ...mapState({
        username: function(state) {
          return state.username
        },
        age: state => state.age,
      })
    },
    data() {
      return {
        title: 'uView ui'
      }
    },
    onLoad() {
      testGet().then(res => {
        this.title = res[0].title
      })
      testPost().then(res => {
        console.log(555, res)
      })
    },
    methods: {
      @debounceDecorator(1000)
      decoratorTest() {
        console.log('装饰器测试')
      },
      goIndexPage() {
        console.log('回到首页')
        uni.navigateTo({
          url: '/pages/index/index'
        })
      }
    }
  }
</script>

<style>
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .logo {
    height: 200rpx;
    width: 200rpx;
    margin-top: 200rpx;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50rpx;
  }

  .text-area {
    display: flex;
    justify-content: center;
  }

  .title {
    font-size: 36rpx;
    color: #8f8f94;
  }
</style>
